import { message } from 'antd';
import { useEffect } from 'react';
import { getLotLocation } from '../../service';
const { AMap } = window;
let map: AMap.Map;

// import * as fengmap from 'fengmap'; //全量包
const CenterMap = (props: { ownerId: string }) => {
  const { ownerId } = props;
  useEffect(() => {
    if (!AMap) return;
    map = new AMap.Map('fengmap', {
      rotateEnable: false,
      pitchEnable: false,
      zoom: 10,
      pitch: 65,
      rotation: 45,
      viewMode: '3D',
      mapStyle: 'amap://styles/darkblue',
      resizeEnable: true,
      zooms: [10, 20],
      skyColor: '#041f37',
    });

    // map.on('moveend', () => {
    //   const centerLocation = map.getCenter();
    //   console.log('first centerLocation', centerLocation);
    // });

    getLotLocation(ownerId).then((res) => {
      if (!res.success) {
        message.warn({ content: res.message, key: 'lot_location' });
        return;
      }
      const { data } = res;
      const markerList = data.map(
        (item) =>
          new AMap.Marker({
            position: item.location,
            icon: '/images/po.png', // 添加 Icon 图标 URL
            title: `${item.parkingLotName}(车位数:${item.spotCount})`,
          }),
      );
      map.add(markerList);
    });
    // TODO: 根据 ownerId 获取经纬度
    // const marker = new AMap.Marker({
    //   position: coords,
    //   icon: '/images/po.png', // 添加 Icon 图标 URL
    //   title: '车场',
    // });

    // map.add(marker);
    // AMap.plugin(['AMap.Geolocation', 'AMap.MarkerClusterer'], () => {
    //   // newMap.addControl(new AMap.ToolBar({ position: 'RB' }));
    //   const geolocation = new AMap.Geolocation({
    //     // 是否使用高精度定位，默认：true
    //     enableHighAccuracy: true,
    //     // 设置定位超时时间，默认：无穷大
    //     timeout: 10000,
    //     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
    //     buttonOffset: new AMap.Pixel(10, 20),
    //     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    //     zoomToAccuracy: true,
    //     //  定位按钮的排放位置,  RB表示右下
    //     buttonPosition: 'RB',
    //   });

    //   map.addControl(geolocation);

    //   geolocation.getCurrentPosition();
    // });
    // eslint-disable-next-line react-hooks/exhaustive-deps
    // map.setCenter(coords);
  }, [ownerId]);

  return <div style={{ width: '100%', height: '100%' }} id="fengmap" />;
};

export default CenterMap;
